<template>
	<navigatorComp title="祠堂族员管理" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<mescroll-uni
		:down="downOption"
		:up="upOption"
		@init="mescrollInit"
		@down="downCallback"
		@up="upCallback"
		:height="height + 'px'"
	>
		<view class="friendList">
			<view class="friend" v-for="(item, index) in friendList">
				<image class="avater" :src="item.headUrl"></image>
				<view class="right">
					<div class="rightTop">
						<view
							class="display_flex"
							style="justify-content: space-between; width: 100%"
						>
							<view class="display_flex">
								<text class="name">{{ item.nickName }}</text>
								<view class="tag">
									{{
										item.characterType == 1
											? '守护者'
											: item.characterType == 2
											? '管理员'
											: '普通成员'
									}}
								</view>
							</view>
							<!-- 	<view class="exit" v-if="isSelf" @click="openExit(item.userId)">
									<image src="http://112.124.50.179:8888/imgs/home/exit.png" mode=""></image>
									退出
								</view> -->
							<image
								v-if="item.characterType !== 1"
								@click="showMore(item)"
								src="http://112.124.50.179:8888/imgs/chaoshan/dot.png"
								mode=""
								class="more"
							></image>
						</view>
						<view class="time">加入时间:{{ item.joinTime }}</view>
					</div>
					<div class="rightBottom">
						<image src="http://112.124.50.179:8888/imgs/home/temple_zy1.png"></image>
						<text style="margin-right: 32rpx">{{ item.candleNumber }}</text>
						<image src="http://112.124.50.179:8888/imgs/home/temple_zy2.png"></image>
						<text>{{ item.lookNumber }}</text>
					</div>
				</view>
			</view>
		</view>
	</mescroll-uni>

	<!-- 按钮弹框 -->
	<u-popup
		:show="showMoreFunc"
		bgColor="rgba(0,0,0,0)"
		@close="closeMore"
		custom-style="padding:0 16rpx 0;"
	>
		<view style="margin-bottom: 16rpx; border-radius: 26rpx; overflow: hidden">
			<u-button
				shape="circle"
				:custom-style="{ ...moreBtnStyle }"
				@click="remove"
				v-if="isSelf == 1 || isSelf == 2"
			>
				移除成员
			</u-button>
			<u-button
				shape="circle"
				:custom-style="{ ...moreBtnStyle }"
				@click="setAdmin"
				v-if="isSelf == 1"
			>
				{{ showItem.setType == 1 ? '设置' : '取消' }}管理员
			</u-button>
			<u-button
				shape="circle"
				:custom-style="moreBtnStyle"
				@click="report"
				v-if="isSelf == 2 || isSelf == 3"
			>
				退出亲友团
			</u-button>
		</view>
		<u-button
			shape="circle"
			:custom-style="{
				...moreBtnStyle,
				fontWeight: 600,
				borderRadius: '26rpx',
				marginBottom: '16rpx'
			}"
			@click="closeMore"
		>
			取消
		</u-button>
	</u-popup>

	<footerBtn bgcColor="#121512" name="邀请族员" @clickBtn="showShare = true">
		<image
			style="width: 36rpx; height: 36rpx; margin-right: 8rpx"
			:src="imgUrl + 'imgs/home/temple_zy_add.png'"
			mode=""
		></image>
	</footerBtn>

	<sharePopup
		v-model:show="showShare"
		title="邀请族员"
		height="592rpx"
		:isReport="false"
	></sharePopup>
</template>

<script setup>
import { ref, reactive } from 'vue';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import navigatorComp from '/components/navigator/index.vue';
import footerBtn from '/components/footerBtn/index.vue';
import sharePopup from '/components/popup/share.vue';
import HomeApi from '@/API/home/index.js';
import { imgUrl } from '@/external/utils/imgUrl';
import { timeFormat } from '@/node_modules/uview-plus';
import { onReady, onPageScroll, onReachBottom, onShow, onLoad } from '@dcloudio/uni-app';

const homeApi = new HomeApi();
onShow(() => {
	setTimeout(() => {
		latestId.value = 0;
		getMescroll().resetUpScroll();
	}, 1);
});
onReady(() => {
	// #ifdef H5
	height.value =
		uni.getSystemInfoSync().windowHeight - uni.upx2px(88 + 32) - getApp().globalData.navHeight;
	// #endif

	// #ifdef MP-WEIXIN
	height.value =
		uni.getSystemInfoSync().windowHeight - uni.upx2px(32) - getApp().globalData.navHeight;
	// #endif
});
onLoad((o) => {
	if (o.dataObj) {
		dataObj.value = JSON.parse(o.dataObj);
	}
});
const { getMescroll, mescrollInit } = useMescroll(); // 调用mescroll的hook
//翻页信息
const downOption = ref({
	auto: false
});
const upOption = ref({
	auto: false
});
//分享弹框
const showShare = ref(false);
// 更多按钮
const showMoreFunc = ref(false);
const moreBtnStyle = {
	height: '120rpx',
	backgroundColor: '#fff',
	fontWeight: '400',
	fontSize: '40rpx',
	color: '#007AFF',
	borderRadius: '0'
};
let height = ref(0);
let latestId = ref(0);
let showItem = ref({});
let dataObj = ref({});
const friendList = ref();
const isSelf = ref(true); //是否本人

const downCallback = (mescroll) => {
	latestId.value = 0;
	getMescroll().resetUpScroll();
};

const upCallback = (mescroll) => {
	homeApi
		.getHallMemberListApi({
			hallId: dataObj.value.hallId || uni.getStorageSync('hallId'),
			latestId: latestId.value
		})
		.then((res) => {
			const curPageData = res.data.memberList || []; // 当前页数据
			if (latestId.value == 0) friendList.value = [];
			curPageData.forEach((item) => {
				item.joinTime = timeFormat(item.joinTime, 'yyyy-mm-dd hh:MM:ss');
				if (
					uni.getStorageSync('userInfo').userId == item.userId &&
					item.characterType == 1
				) {
					isSelf.value = 1;
				} else if (
					uni.getStorageSync('userInfo').userId == item.userId &&
					item.characterType == 2
				) {
					isSelf.value = 2;
				} else if (
					uni.getStorageSync('userInfo').userId == item.userId &&
					item.characterType == 3
				) {
					isSelf.value = 3;
				}
			});

			friendList.value = friendList.value.concat(curPageData);
			if (curPageData.length) {
				latestId.value = curPageData[curPageData.length - 1].userId || 0;
			}
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		})
		.catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		});
};

const showMore = (item) => {
	showItem.value = item;
	if (showItem.value.characterType == 3) {
		showItem.value.setType = 1;
	}
	if (showItem.value.characterType == 2) {
		showItem.value.setType = 2;
	}
	showMoreFunc.value = true;
	console.log(showItem.value);
};

const closeMore = () => {
	showMoreFunc.value = false;
};

// const openExit = (id) => {
// 	popupType.value = 1
// 	showMoreFunc.value = true;
// }
const setAdmin = () => {
	homeApi
		.setHallAdminApi({
			hallId: dataObj.value.hallId || uni.getStorageSync('hallId'),
			UserId: showItem.value.userId,
			setType: showItem.value.setType
		})
		.then((res) => {
			uni.showToast({
				title: showItem.value.setType == 1 ? '设置管理员成功' : '取消管理员成功'
			});
			showMoreFunc.value = false;
			latestId.value = 0;
			getMescroll().resetUpScroll();
		})
		.catch(() => {});
};
const report = () => {
	homeApi
		.quitHallMemberApi({
			hallId: dataObj.value.hallId || uni.getStorageSync('hallId')
		})
		.then((res) => {
			uni.showToast({
				title: '退出成功'
			});
			showMoreFunc.value = false;
			latestId.value = 0;
			getMescroll().resetUpScroll();
		})
		.catch(() => {});
};
const remove = () => {
	homeApi
		.removeHallMemberApi({
			userId: showItem.value.userId,
			hallId: dataObj.value.hallId || uni.getStorageSync('hallId')
		})
		.then((res) => {
			uni.showToast({
				title: '移除成功'
			});
			showMoreFunc.value = false;
			latestId.value = 0;
			getMescroll().resetUpScroll();
		})
		.catch(() => {});
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.content {
	background-color: #121512;
}

.title {
	color: #ffffff;
	line-height: 32rpx;
	padding: 32rpx 0;
}

.friendList {
	padding: 32rpx 32rpx calc(env(safe-area-inset-bottom) + 32rpx);

	.friend {
		width: 100%;
		height: 176rpx;
		background: #292b2a;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-bottom: 24rpx;
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;

		.avater {
			width: 80rpx;
			height: 80rpx;
			margin-right: 24rpx;
		}

		.right {
			flex: 1;
		}

		.rightTop {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: flex-start;
			flex-direction: column;
			justify-content: space-between;
		}

		.name {
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 33rpx;
			margin-right: 12rpx;
		}

		.tag {
			background: #f3e0bb;
			border-radius: 17rpx 17rpx 17rpx 17rpx;
			font-weight: 500;
			font-size: 18rpx;
			color: #524630;
			line-height: 26rpx;
			text-align: center;
			padding: 4rpx 16rpx;
		}

		.more {
			width: 40rpx;
			height: 40rpx;
		}

		.exit {
			width: 108rpx;
			height: 48rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 2rpx solid #999999;
			font-weight: 400;
			font-size: 22rpx;
			color: #c5c5c5;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}

		.time {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 28rpx;
		}

		.rightBottom {
			margin-top: 16rpx;
			font-weight: 400;
			font-size: 18rpx;
			color: #ececec;
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
	}
}
</style>
